<template>
	<view class="main">
		<view class="content">
			<!-- JSON.stringify(userInfo) != '{}' -->
			<view class="" v-if="token">
				<view class="user" @click="$goURl(`/pages/index/userInfo`)">
					<view class="avatar">
						<image :src="userInfo.avatar ? BASE_URL + userInfo.avatar : '/static/logo1.jpg'" mode="aspectFill"></image>
					</view>
					<view class="desc">
						<view class="cp">{{ userInfo.nickName }}{{ userInfo.platenumber ? '·' + userInfo.platenumber : '' }}</view>
						<view class="tel">{{ userInfo.phonenumber }}</view>
					</view>
				</view>
			</view>
			<view class="login" v-else @click="$goURl('/pages/login/login')">请先登录</view>
			<view class="coupon">
				<view class="con" @click="$goURl(`/pages/index/myCoupon`)">
					<image src="/static/q.png" mode=""></image>
					<view class="t">我的优惠券</view>
				</view>
			</view>
			<view class="coupon" style="background-color: transparent">
				<view class="get" @click="$goURl('/pages/login/merchantLogin')">核销二维码</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { BASE_URL } from '@/config/base.js';
import { getUserInfo } from '@/api/apiList.js';
import { ref, watch } from 'vue';

const token = uni.getStorageSync('token');

let userInfo = ref({});
// let userInfo = uni.getStorageSync('userInfo');
const getUser = async () => {
	const res = await getUserInfo();
	if (res.code == 200) {
		userInfo.value = res.data;
	}
};
getUser();
</script>

<style lang="scss" scoped>
.main {
	.content {
		padding: 0 30rpx;
		.coupon {
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 41rpx;
			.get {
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(0deg, #f49a5e 0%, #fe4f56 100%);
				padding: 20rpx 0;
				width: 100%;
				color: #fff;
				border-radius: 16rpx;
			}
			.con {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				image {
					width: 48rpx;
					height: 48rpx;
				}
				.t {
					margin-top: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
		.user {
			display: flex;
			align-items: center;
			.avatar {
				margin-right: 35rpx;
				image {
					width: 154rpx;
					height: 154rpx;
					border-radius: 32rpx;
				}
			}
			.desc {
				.cp {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}
				.tel {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
				}
			}
		}
	}
}

.login {
	font-size: 40rpx;
	color: #333;
	font-weight: 900;
}
</style>
